<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>注册</title>

	<link href="https://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../code/zhh.validate.css" type="text/css" rel="stylesheet" />
	<link href="demo/demo.css" type="text/css" rel="stylesheet" />

	<script src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
	<script src="https://apps.bdimg.com/libs/bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../../zhh.tools/zhh.tools.js" type="text/javascript" charset="UTF-8"></script>
	<script src="../code/zhh.validate.js" type="text/javascript" charset="UTF-8"></script>
    <script src="demo/demo.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>


	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="https://zhaohuihua.gitee.io/">zhaohuihua</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="divider-vertical"></li>
						<li><a href="https://gitee.com/zhaohuihua/zhh.validate.js">zhh.validate.js</a></li>
						<li class="divider-vertical"></li>
						<li><a href="./index.html">说明文档</a></li>
						<li class="divider-vertical"></li>
						<li class="active"><a href="./register.html">注册示例</a></li>
						<li class="divider-vertical"></li>
						<li><a href="https://gitee.com/zhaohuihua/zhh.validate.js/repository/archive/master.zip">下载</a></li>
						<li class="divider-vertical"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>


	<div class="container main-box">
		<div class="row" data-title="意见反馈: zhaohuihua@126.com">
			<div class="main-inner">
				<div class="page-header">
					<h3 class="text-center">用户注册</h3>
				</div>
				<form class="vld-form form-horizontal">
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 登录账号</label>
						<div class="controls">
							<input class="span3" type="text" name="account" autocomplete="off"
								data-vld="[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'用户名已被使用'} ]" />
							<span class="help-inline">
								<i class="vld-tips">4-10位数字或字母</i>
							</span>
						</div>
						<div class="controls">
							<p>必填，4-10位，不支持中文字符</p>
							<p>不允许包含!@#$%^&*,./\等特殊字符，AJAX校验</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 密码</label>
						<div class="controls">
							<input class="span3" type="password" name="pwd" data-trim="false" 
								data-vld="[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />
							<span class="help-inline">
								<i class="vld-tips">密码必须包含字母/数字/特殊字符的任意两种</i>
							</span>
						</div>
						<div class="controls">
							<p>必填，6-16位，支持空格，不支持中文字符，不能与用户名相同</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 确认密码</label>
						<div class="controls">
							<input class="span3" type="password" name="pwdconfim" data-vld="{required:true,compare:'[name=pwd]'}"/>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p>必填，必须与密码相同</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label">真实姓名</label>
						<div class="controls">
							<input class="span3" type="text" name="name" autocomplete="off" data-trim="true" 
								 data-vld="[ {length:[2,6]}, {regexp:/^[^\x00-\x7F]*$/,text:'真实姓名必须是中文字符'} ]" />
							<span class="help-inline">
								<i class="vld-tips">中文真实姓名</i>
							</span>
						</div>
						<div class="controls">
							<p>可不填，2-6位，必须是中文字符</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 性别</label>
						<div class="controls">
							<div class="input-prepend input-radio">
								<span class="add-on"><input type="radio" id="male" name="gender" value="1" autocomplete="off" data-vld="{required:true}" /></span>
								<label class="input" for="male">男</label>
								<span class="add-on"><input type="radio" id="female" name="gender" value="2" autocomplete="off" /></span>
								<label class="input" for="female">女</label>
								<span class="add-on"><input type="radio" id="secret" name="gender" value="3" autocomplete="off" /></span>
								<label class="input" for="secret">保密</label>
							</div>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label">出生年份</label>
						<div class="controls">
							<input class="span3" type="text" name="year" autocomplete="off" 
								data-vld="[ {number:[1900]}, {'less-year':true} ]" />
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p>可不填，必须是4位数字，不能大于今年</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 邮箱地址</label>
						<div class="controls">
							<input class="span3" type="text" name="email" autocomplete="off"
								data-vld="[ {required:true}, {length:[6,32]}, {regexp:'email'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'邮箱地址已被使用'} ]" />
							<span class="help-inline">
								<i class="vld-tips">例如：name@email.com</i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label">个人网站</label>
						<div class="controls">
							<input class="span3" type="text" name="email" autocomplete="off" data-vld="[ {length:{max:32}}, {regexp:'url'} ]" />
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 手机号码</label>
						<div class="controls">
							<input class="span3" type="text" name="phone" autocomplete="off" data-vld="[ {required:true}, {regexp:'mobile'} ]" />
							<span class="help-inline">
								<i class="vld-tips">手机号码仅用于身份认证，不会收取任何费用</i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 收入水平</label>
						<div class="controls">
							<select class="span3" name="area" autocomplete="off" data-vld="{required:true}" >
								<option value="">----请选择----</option>
								<option value="1001">0 - 5000</option>
								<option value="1002">5001 - 10000</option>
								<option value="1003">10001 - 20000</option>
								<option value="1004">20000以上</option>
							</select>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 兴趣爱好</label>
						<div class="controls">
							<div class="input-prepend input-checkbox">
								<span class="add-on"><input type="checkbox" id="hobbies-1" name="hobbies" value="1" autocomplete="off" data-vld="{required:true}" /></span>
								<label class="input" for="hobbies-1">旅游</label>
								<span class="add-on"><input type="checkbox" id="hobbies-2" name="hobbies" value="2" autocomplete="off" /></span>
								<label class="input" for="hobbies-2">购物</label>
								<span class="add-on"><input type="checkbox" id="hobbies-3" name="hobbies" value="3" autocomplete="off" /></span>
								<label class="input" for="hobbies-3">宅着</label>
							</div>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 服务协议</label>
						<div class="controls">
							<div class="input-prepend">
								<span class="add-on"><input type="checkbox" id="agree" name="agree" autocomplete="off" data-vld="{required:true,text:'您还未同意服务协议'}" /></span>
								<label class="input" for="agree">我同意接受&nbsp;《<a href="#">服务协议</a>》</label>
							</div>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group">&nbsp;</div>
					<div class="control-group text-center">
						<input type="button" class="btn btn-primary input-medium vld-submit" value="提交" />
					</div>
				</form>
			</div>
		</div>
	</div>

</body>
</html>
